<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body{
            display: grid;
            place-items: center;
        }

        /* 自定义组件定义之后展示的样式 */
        my-component:defined {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        /* 自定义组件定义之前展示的样式 */
        my-component:not(:defined) {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <my-component color="red">loading...</my-component>
    <input is="my-input" placeholder="" />

    <script>
        class MyComponent extends HTMLElement {
            get color () {
                return this.getAttribute("color")
            }
            // 触发 attributeChangedCallback 
            set color () {
                this.setAttribute("color")
            }

            // 观察属性：底层使用观察者模式实现的
            static observedAttributes = ['color']

            constructor(){
                super()

                // this 就是组件自己
                console.log(this)

                this.innerHTML = "自定义组件内容"
                this.onclick = () => {
                    console.log("compoent:", customElements.get("my-component"))
                }
            }

            // 生命周期：可以实现的update方案
            attributeChangedCallback (name, oldValue, newValue) {
                // attribute
                // property
                if(name === "color"){
                    this.style.color = newValue
                }
            }
        }

        // 定义组件
        customElements.define("my-component", MyComponent, {})



        // // 剪切组件
        // const c = document.querySelector("my-component")
        // document.body.append(document.adoptNode(c))

        // // 1、自定义一个组件
        // // 名字里面必须要有横杠 -，用于区别HTML原生的标签
        // setTimeout(()=>{
        //     customElements.define("my-component", MyComponent)
        // }, 2000)

        // // 4、upgrade
        // console.log(el instanceof MyComponent) // false
        // customElements.upgrade(el)
        // console.log(el instanceof MyComponent) // true

    </script>

    <script>
        class MyInput extends HTMLInputElement {
            constructor () {
                super()

                this.value = "自定义input"
            }
        }

        customElements.define("my-input", MyInput, { extends: 'input' })

        // 使用js代码添加自定义组件节点
        document.body.append(new MyInput())
    </script>
</body>
</html>